<template>
  <CommonPanel title="滞留车辆信息">
    <div class="content-box">
      <ScrollTable :columns="columns" :tableData="prjLists" >
      <template #default="{ prjLists }">
        <div
          @click="handleDetail(item)"
          class="scroll-row"
          v-for="item in prjLists"
          :key="item.id"
        >
          <div  class="column1">{{ item.plateNo }}</div>
          <div class="column2">{{ item.inTime }}</div>
          <div class="column3">{{ item.parkName }}</div>
          <div class="column4">{{ item.parkTime }}</div>
        </div>
      </template>
    </ScrollTable>
    </div>
  </CommonPanel>
</template>

<script setup>
import { computed, ref, onMounted, watch, reactive } from "vue";

const columns = [
  { label: "车牌", prop: "plateNo",  },
  { label: "入场时间", prop: "inTime", className: "prj-name"},
  { label: "车位信息", prop: "parkName" },
  { label: "滞留时长", prop: "parkTime", },
];
const props = defineProps({
  data: Object
});
const prjLists = ref([])


watch(() => props.data, (newData) => {
      if (newData) {
        prjLists.value= newData.retention_lists?.map(item=>{
          return item
        })
      }
    });

</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 0px;
  box-sizing: border-box;
  &__tab {
    margin: 14px auto 0;
    // text-align: center;
  }
  &__chart {
    margin-top: 10px;
    flex: 1;
    height: 0px;
  }
}
.column1,
.column2,
.column3,
.column4 {
  flex: 1;
  padding: 0;
  box-sizing: border-box;
}
</style>
